<template>
  <a-modal ref="editModal" title="编辑报工角色" :visible="show" @ok="handleOk" @cancel="handleCancel" width="600px" :maskClosable="false">
    <a-form-model ref="mainForm" :model="role" :rules="rule" layout="vertical">
      <a-form-model-item v-bind="formItemLayout" label="角色名称" labelAlign="right">
        <a-input v-model="role.roleName" />
      </a-form-model-item>
      <a-form-model-item v-bind="formItemLayout" label="角色成员" labelAlign="right">
        <div style="line-height: 2.5">
          <span class="userTag" v-for="(item, index) of defaultUserList" :key="index">
            {{ item.realName }}
            <span class="removeUserTag" @click="removeUser(item)"> x </span>
          </span>
          <a-tag class="userTag" @click="openUserSelector()"> ... </a-tag>
        </div>
      </a-form-model-item>
    </a-form-model>
    <UserSelector :show="showUserSelector" ref="userSelectorRef" @selected="selectUser" />
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import UserSelector from '@/views/workReport/role/UserSelector'
export default {
  components: {
    UserSelector,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      role: {},
      rule: {},
      urls: {
        info: '/workReport/role/info',
        edit: '/workReport/role/edit',
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 6 },
          sm: { span: 6 },
        },

        wrapperCol: {
          xs: { span: 18 },
          sm: { span: 18 },
        },
      },
      templateSelectorKey: '',
      showTemplateSelector: false,
      showUserSelector: false,
      defaultUserList: [],
    }
  },
  mounted() {},
  methods: {
    fetchData(id) {
      if (id == -1) {
        this.role = {}
        this.defaultUserList = []
      } else {
        getAction(this.urls.info + '/' + id, {}).then((res) => {
          if (res.success) {
            this.role = res.result
            // this.$set(this.role, 'showInstallmentList', this.role.showInstallmentList + '')
            // this.$set(this.role, 'showNodeTimeList', this.role.showNodeTimeList + '')
            // this.$set(this.role, 'showContractAttachList', this.role.showContractAttachList + '')
            this.defaultUser()
          }
        })
      }
    },
    getRole() {
      return this.role
    },
    openTemplateSelector(key) {
      this.templateSelectorKey = key
      this.$refs.templateSelectorRef.init()
      this.showTemplateSelector = true
    },
    selectTemplate(selection) {
      if (selection != null && selection.length > 0) {
        this.$set(this.role, this.templateSelectorKey + 'Id', selection[0].id)
        this.$set(this.role, this.templateSelectorKey, selection[0].name)
      } else {
        this.$set(this.role, this.templateSelectorKey + 'Id', '')
        this.$set(this.role, this.templateSelectorKey, '')
      }
      this.showTemplateSelector = false
    },
    openUserSelector() {
      this.$refs.userSelectorRef.init()
      this.showUserSelector = true
    },
    selectUser(selection) {
      if (selection != null && selection.length > 0) {
        let userName = []
        let realName = []
        if (this.role.defaultUserName) {
          userName = this.role.defaultUserName.split(',')
          realName = this.role.defaultRealName.split(',')
        }
        for (let i = 0; i < selection.length; i++) {
          if (userName.indexOf(selection[i].username) <= -1) {
            userName.push(selection[i].username)
            realName.push(selection[i].realname)
          }
        }
        this.$set(this.role, 'defaultUserName', userName.join(','))
        this.$set(this.role, 'defaultRealName', realName.join(','))
        this.defaultUser()
      }
       this.showUserSelector = false
    },
    defaultUser() {
      this.defaultUserList = []
      if (this.role.defaultUserName && this.role.defaultRealName) {
        let userName = this.role.defaultUserName.split(',')
        let realName = this.role.defaultRealName.split(',')
        for (let i = 0; i < userName.length; i++) {
          this.defaultUserList.push({ userName: userName[i], realName: realName[i] })
        }
      }
    },
    removeUser(user) {
      debugger
      if (this.role.defaultUserName && this.role.defaultRealName) {
        let userName = this.role.defaultUserName.split(',')
        let realName = this.role.defaultRealName.split(',')
        if (userName.indexOf(user.userName) > -1) {
          userName.splice(userName.indexOf(user.userName), 1)
          realName.splice(realName.indexOf(user.realName), 1)
        }
        this.$set(this.role, 'defaultUserName', userName.join(','))
        this.$set(this.role, 'defaultRealName', realName.join(','))
      }
      this.defaultUser()
    },
    handleOk() {
      postAction(this.urls.edit, this.role).then((res) => {
        if (res.success) {
          this.showEdit = false
          this.$emit('close')
          this.$messageWorkReport.success('保存成功')
        }
      })
    },
    handleCancel(e) {
      this.$emit('close')
    },
  },
}
</script>

<style scoped>
/deep/.ant-form-vertical .ant-form-item-label {
  text-align: right;
  padding: 5px 5px;
}
.userTag {
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid cyan;
  border-radius: 3px;
  line-height: 20px;
  display: inline-block;
}
.removeUserTag {
  margin-right: 0px;
  cursor: pointer;
}
</style> 